<template>
  <div class="club-level-statistics-card">
    <div class="header">
      <span>俱乐部级别数据</span>
    </div>
    <div class="content">
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">获得级别的俱乐部总数/家</span>
          <span class="number">{{ number.toLocaleString() }}</span>
        </div>
      </div>
    </div>
    <div ref="ringChart" class="chart" id="Chart1"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import { getClubLevelData } from '@/api/statistics'

  export default {
    data() {
      return {
        number: 0,
        chart: null,
        chartData: []
      }
    },
    async created() {
      await this.drawChart()
    },
    methods: {
      async drawChart() {
        try {
          const res = await getClubLevelData({ year: new Date().getFullYear() })
          if (res && res.data) {
            this.number = res.data.number
            this.chartData = res.data.list
            this.$nextTick(() => {
              this.initChart()
            })
          }
        } catch (error) {
          console.error('获取俱乐部等级数据失败:', error)
        }
      },
      initChart() {
        this.chart = echarts.init(document.getElementById("Chart1"))
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: this.chartData.map(item => item.name),
            itemGap: 20,
            formatter: name => {
              const item = this.chartData.find(item => item.name === name)
              return `${name}  ${item.value}`
            }
          },
          series: [{
            name: '俱乐部级别',
            type: 'pie',
            radius: ['35%', '50%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: this.number.toLocaleString(),
              color: '#333',
              fontSize: 24,
              fontWeight: 'bold'
            },
            labelLine: {
              show: false
            },
            data: this.chartData,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            }
          }]
        }
        this.chart.setOption(option)
        // 监听父元素大小变化
        const ro = new ResizeObserver(entries => {
          for (let entry of entries) {
            const cr = entry.contentRect;
            if (this.chart) {
              this.chart.resize();
            }
          }
        });
        ro.observe(Chart);
      }
    },
    beforeDestroy() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
    }
  }
</script>

<style scoped>
  .club-level-statistics-card {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
  }

  .header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
  }

  .content {
    margin-bottom: 20px;
  }

  .info {
    display: flex;
    align-items: center;
    background-color: #f0f2f5;
    padding: 10px;
    border-radius: 4px;
  }

  .unit-line {
    display: inline-block;
    width: 4px;
    height: 40px;
    background-color: #409EFF;
    margin-right: 8px;
  }

  .text {
    display: flex;
    flex-direction: column;
  }

  .unit {
    font-size: 14px;
    color: #999;
  }

  .number {
    font-size: 28px;
    font-weight: bold;
    color: #333;
  }

  .chart {
    width: 100%;
    height: 250px;
  }
</style>
